<template>
	<view class="page flex-col">
		<view class="box_1 flex-col">
			<!-- <view class="section_1 flex-col">
				<QSNavbar :navbarItems="navbarItems_1" backgroundColor="rgba(0,0,0,0)"></QSNavbar>
			</view> -->
			<view class="section_3 flex-col" v-for="(item, index) in loopDataq" :key="index">
				<view class="block_1 flex-row justify-between">
					<view class="image-text_1 flex-row justify-between">
						<image class="icon_2" referrerpolicy="no-referrer"
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/bddcf48b7d5f734994432d168f27c549e9be7220.png" />
						<text class="text-group_1">{{item.name}}</text>
					</view>
					<text class="text_2">{{item.status_text}}</text>
					<!-- <text class="text_2">待使用</text>
					<text class="text_2">待使用</text> -->
				</view>
				<!-- // q_type 平台1 场馆2 新人3 -->
				<!-- //type 代金券1 满减券2 折扣券3 -->
				<view class="block_2 flex-row" v-if="item.type == 1">
					<view class="text-wrapper_1 flex-row" :style="{backgroundImage:'url('+msg.url+')'}">
						<text class="text_3">¥</text>
						<text class="text_4">{{item.jian}}</text>
					</view>
					<view class="group_1 flex-col">
						<text class="text_5">{{item.man}}元代金券</text>
						<view class="tag_1 flex-col">
							<text class="text_6">有效期:{{item.can_get_time}}</text>
						</view>
						<!-- <view class="text-wrapper_2">
							<text class="text_7">￥</text>
							<text class="text_8">30.</text>
							<text class="text_9">00</text>
						</view> -->
					</view>
					<!-- <text class="text_10">×1</text> -->
				</view>
				<view class="block_2 flex-row" v-if="item.type == 2" >
					<view class="text-wrapper_1 flex-row" :style="{backgroundImage:'url('+msg.url+')'}">
						<text class="text_3">¥</text>
						<text class="text_4">{{item.jian}}</text>
					</view>
					<view class="group_1 flex-col">
						<text class="text_5">{{item.man}}元满减券</text>
						<view class="tag_1 flex-col">
							<text class="text_6">有效期:{{item.can_get_time}}</text>
						</view>
					</view>
				</view>
				<view class="block_2 flex-row" v-if="item.type == 3">
					<view class="text-wrapper_1 flex-row"  :style="{backgroundImage:'url('+msg.url1+')'}">
						<text class="text_3"></text>
						<text class="text_4">{{item.jian}}折</text>
					</view>
					<view class="group_1 flex-col">
						<text class="text_5">{{item.man}}元折扣券</text>
						<view class="tag_1 flex-col">
							<text class="text_6">有效期:{{item.can_get_time}}</text>
						</view>
					</view>
				</view>
				<view class="block_3 flex-row" v-if="item.status_text == '未使用'">
					<button class="button_1 flex-col" @click="onClick_1">
						<text class="text_11">立即使用</text>
					</button>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	// import QSNavbar from "@/components/QS-Navbar/QS-Navbar.vue";
	const market = require("@/api/market/index.js");
	export default {
		// components: {
		// 	QSNavbar
		// },
		data() {
			return {
				msg: {
					url: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/2fb57e675b66edd1aef76dfccfab9291095c0529.png',


					url1: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/876738828743520c7a4bae53a5566d74c3a0f101.png'

				},

				navbarItems_1: [{
						type: "icon",
						icon: "back",
						layout: "left",
						width: 15,
						doEvent: "back",
						iconColor: "#000000",
					},
					{
						type: "text",
						text: "领卷记录",
						width: 70,
						weight: "bold",
						color: "#000000",
						textAlign: "left",
					},
				],
				loopDataq: [],
				constants: {},
				recordlist: [],
				listQuery: { //分页
					pageNo: 1,
					pageSize: 6,
				},
				totalPage: '', //几页
			};
		},
		onLoad() {
			this.getCouponRecord()
		},
		methods: {
			async getCouponRecord() {
				let that = this;
				if (this.listQuery.pageNo === 1) that.loopDataq = [];
				let postData = {
					open_id: uni.getStorageSync('openid'),
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					page: this.listQuery.pageNo,
					limit: this.listQuery.pageSize,
				}
				let res = await market.getCouponRecord(postData);
				if (res.code == 1) {
					that.loopDataq = that.loopDataq.concat(res.data.result.data); //将数据拼接在一起
					that.totalPage = res.data.result.last_page
				}
			},
			// 下拉刷新
			onReachBottom() {
				// uni.showLoading({
				// 	title: '加载中'
				// });
				if (this.totalPage <= this.listQuery.pageNo) {
					// uni.hideLoading();
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.pageNo += 1;
				this.getCouponRecord()
			},
			onClick_1() {
				uni.navigateTo({
					url: '/pages/venues/index'
				})
			}
		}
	};
</script>
<style lang='scss'>
	@import '../../static/css/common/common.scss';

	.page {
		position: relative;
		width: 750rpx;
		height: 100%;
		overflow: hidden;

		.box_1 {
			width: 100%;
			height: 100%;
			background-color: #eeeeee;
			/* width: 750rpx; */
			/* height: 1624rpx; */
			/* background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/f0657311e4b25e005c0f3390966b4a22c1dfb9f4.png') 100% no-repeat; */
			/* background-size: 100% 100%; */

			.section_1 {
				background-color: rgba(255, 255, 255, 1);
				width: 750rpx;
				height: 176rpx;

				.image_1 {
					width: 654rpx;
					height: 22rpx;
					margin: 33rpx 0 0 48rpx;
				}

				.nav-bar_1 {
					width: 750rpx;
					height: 100rpx;
					margin: 23rpx 0 2rpx 0;

					.section_2 {
						height: 36rpx;
						width: 184rpx;
						margin: 36rpx 0 0 30rpx;

						.box_2 {
							width: 184rpx;
							height: 36rpx;

							.icon_1 {
								width: 20rpx;
								height: 36rpx;
							}

							.text_1 {
								width: 145rpx;
								height: 34rpx;
								overflow-wrap: break-word;
								color: rgba(51, 51, 51, 1);
								font-size: 36rpx;
								font-family: PingFang-SC-Regular;
								font-weight: NaN;
								text-align: left;
								white-space: nowrap;
								line-height: 34rpx;
								margin-top: 1rpx;
							}
						}
					}

					.applet-top-bar_1 {
						width: 150rpx;
						height: 55rpx;
						margin: 27rpx 30rpx 0 0;
					}
				}
			}

			.section_3 {
				box-shadow: 0px 13px 57px 0px rgba(8, 73, 162, 0.11);
				background-color: rgba(255, 255, 255, 1);
				border-radius: 16px;
				height: 391rpx;
				width: 690rpx;
				margin: 20rpx 0 0 30rpx;

				.block_1 {
					width: 639rpx;
					height: 30rpx;
					margin: 31rpx 0 0 24rpx;

					.image-text_1 {
						width: 211rpx;
						height: 30rpx;

						.icon_2 {
							width: 30rpx;
							height: 30rpx;
						}

						.text-group_1 {
							width: 170rpx;
							height: 27rpx;
							overflow-wrap: break-word;
							color: rgba(51, 51, 51, 1);
							font-size: 28rpx;
							font-family: PingFang-SC-Regular;
							font-weight: NaN;
							text-align: left;
							white-space: nowrap;
							line-height: 28rpx;
							margin-top: 2rpx;
						}
					}

					.text_2 {
						width: 82rpx;
						height: 27rpx;
						overflow-wrap: break-word;
						color: rgba(255, 65, 5, 1);
						font-size: 28rpx;
						font-family: PingFang-SC-Regular;
						font-weight: NaN;
						text-align: left;
						white-space: nowrap;
						line-height: 28rpx;
						margin-top: 2rpx;
					}
				}

				.block_2 {
					width: 635rpx;
					height: 181rpx;
					margin: 30rpx 0 0 24rpx;

					.text-wrapper_1 {
						width: 180rpx;
						height: 180rpx;
						/* background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/2fb57e675b66edd1aef76dfccfab9291095c0529.png') 100% no-repeat; */
						background-size: 100% 100%;

						.text_3 {
							width: 18rpx;
							height: 26rpx;
							overflow-wrap: break-word;
							color: rgba(253, 243, 212, 1);
							font-size: 33rpx;
							font-family: SourceHanSansCN-Regular;
							font-weight: NaN;
							text-align: left;
							white-space: nowrap;
							line-height: 33rpx;
							margin: 84rpx 0 0 22rpx;
						}

						.text_4 {
							width: 87rpx;
							height: 68rpx;
							overflow-wrap: break-word;
							color: rgba(253, 243, 212, 1);
							font-size: 40rpx;
							font-weight: 700;
							text-align: left;
							white-space: nowrap;
							line-height: 85rpx;
							margin: 54rpx 39rpx 0 2rpx;
						}
					}

					.group_1 {
						width: 238rpx;
						height: 168rpx;
						margin: 13rpx 0 0 25rpx;

						.text_5 {
							width: 185rpx;
							height: 25rpx;
							overflow-wrap: break-word;
							color: rgba(51, 51, 51, 1);
							font-size: 26rpx;
							font-family: PingFang-SC-Medium;
							font-weight: 500;
							text-align: left;
							white-space: nowrap;
							line-height: 26rpx;
						}

						.tag_1 {
							background-color: rgba(243, 243, 243, 1);
							border-radius: 18px;
							height: 36rpx;
							margin-top: 19rpx;
							width: 170%;

							.text_6 {
								width: 201rpx;
								height: 23rpx;
								overflow-wrap: break-word;
								color: rgba(51, 51, 51, 1);
								font-size: 24rpx;
								font-family: PingFang-SC-Medium;
								font-weight: 500;
								text-align: left;
								white-space: nowrap;
								line-height: 24rpx;
								margin: 6rpx 0 0 21rpx;
							}
						}

						.text-wrapper_2 {
							width: 99rpx;
							height: 27rpx;
							overflow-wrap: break-word;
							font-size: 0;
							font-family: PingFang-SC-Medium;
							font-weight: 500;
							text-align: left;
							white-space: nowrap;
							line-height: 24rpx;
							margin: 61rpx 0 0 1rpx;

							.text_7 {
								width: 99rpx;
								height: 27rpx;
								overflow-wrap: break-word;
								color: rgba(51, 51, 51, 1);
								font-size: 24rpx;
								font-family: PingFang-SC-Medium;
								font-weight: 500;
								text-align: left;
								white-space: nowrap;
								line-height: 24rpx;
							}

							.text_8 {
								width: 99rpx;
								height: 27rpx;
								overflow-wrap: break-word;
								color: rgba(51, 51, 51, 1);
								font-size: 36rpx;
								font-family: DIN-Bold;
								font-weight: 700;
								text-align: left;
								white-space: nowrap;
								line-height: 36rpx;
							}

							.text_9 {
								width: 99rpx;
								height: 27rpx;
								overflow-wrap: break-word;
								color: rgba(51, 51, 51, 1);
								font-size: 30rpx;
								font-family: DIN-Bold;
								font-weight: 700;
								text-align: left;
								white-space: nowrap;
								line-height: 30rpx;
							}
						}
					}

					.text_10 {
						width: 26rpx;
						height: 20rpx;
						overflow-wrap: break-word;
						color: rgba(51, 51, 51, 1);
						font-size: 28rpx;
						font-family: PingFang-SC-Bold;
						font-weight: 700;
						text-align: left;
						white-space: nowrap;
						line-height: 28rpx;
						margin: 160rpx 0 0 166rpx;
					}
				}

				.block_3 {
					width: 174rpx;
					height: 60rpx;
					margin: 29rpx 0 30rpx 496rpx;

					.button_1 {
						background-color: rgba(255, 255, 255, 1);
						border-radius: 30px;
						height: 60rpx;
						border: 1px solid rgba(252, 62, 49, 1);
						width: 174rpx;

						.text_11 {
							width: 111rpx;
							height: 27rpx;
							overflow-wrap: break-word;
							color: rgba(252, 62, 49, 1);
							font-size: 28rpx;
							font-family: PingFang-SC-Medium;
							font-weight: 500;
							text-align: left;
							white-space: nowrap;
							line-height: 28rpx;
							margin: 17rpx 0 0 30rpx;
						}
					}
				}
			}

			.section_4 {
				width: 750rpx;
				height: 1038rpx;
				margin-bottom: 1rpx;

				.list_1 {
					width: 690rpx;
					height: 622rpx;
					justify-content: space-between;
					margin: 20rpx 0 0 30rpx;

					.list-items_1 {
						box-shadow: 0px 13px 57px 0px rgba(8, 73, 162, 0.11);
						background-color: rgba(255, 255, 255, 1);
						border-radius: 16px;
						height: 301rpx;
						margin-bottom: 20rpx;
						width: 690rpx;

						.box_3 {
							width: 639rpx;
							height: 30rpx;
							margin: 31rpx 0 0 24rpx;

							.image-text_2 {
								width: 211rpx;
								height: 30rpx;

								.icon_3 {
									width: 30rpx;
									height: 30rpx;
								}

								.text-group_2 {
									width: 170rpx;
									height: 27rpx;
									overflow-wrap: break-word;
									color: rgba(51, 51, 51, 1);
									font-size: 28rpx;
									font-family: PingFang-SC-Regular;
									font-weight: NaN;
									text-align: left;
									white-space: nowrap;
									line-height: 28rpx;
									margin-top: 2rpx;
								}
							}

							.text_12 {
								width: 82rpx;
								height: 27rpx;
								overflow-wrap: break-word;
								color: rgba(153, 153, 153, 1);
								font-size: 28rpx;
								font-family: PingFang-SC-Regular;
								font-weight: NaN;
								text-align: left;
								white-space: nowrap;
								line-height: 28rpx;
								margin-top: 2rpx;
							}
						}

						.box_4 {
							width: 630rpx;
							height: 180rpx;
							margin: 30rpx 0 30rpx 24rpx;

							.text-wrapper_3 {
								width: 180rpx;
								height: 180rpx;
								background-size: 100% 100%;

								.text_13 {
									width: 18rpx;
									height: 26rpx;
									overflow-wrap: break-word;
									color: rgba(253, 243, 212, 1);
									font-size: 33rpx;
									font-family: SourceHanSansCN-Regular;
									font-weight: NaN;
									text-align: left;
									white-space: nowrap;
									line-height: 33rpx;
									margin: 94rpx 0 0 34rpx;
								}

								.text_14 {
									width: 87rpx;
									height: 68rpx;
									overflow-wrap: break-word;
									color: rgba(253, 243, 212, 1);
									font-size: 85rpx;
									font-family: SourceHanSansCN-Bold;
									font-weight: 700;
									text-align: left;
									white-space: nowrap;
									line-height: 85rpx;
									margin: 54rpx 39rpx 0 2rpx;
								}
							}

							.text_15 {
								width: 185rpx;
								height: 25rpx;
								overflow-wrap: break-word;
								color: rgba(51, 51, 51, 1);
								font-size: 26rpx;
								font-family: PingFang-SC-Medium;
								font-weight: 500;
								text-align: left;
								white-space: nowrap;
								line-height: 26rpx;
								margin: 13rpx 0 0 25rpx;
							}

							.text_16 {
								width: 26rpx;
								height: 20rpx;
								overflow-wrap: break-word;
								color: rgba(51, 51, 51, 1);
								font-size: 28rpx;
								font-family: PingFang-SC-Bold;
								font-weight: 700;
								text-align: left;
								white-space: nowrap;
								line-height: 28rpx;
								margin: 160rpx 0 0 214rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
